<template>
  <view class="nv-pick">
    <view class="nv-pick_title">
      <text>{{title}}</text>
      <view class="v-icon"><van-icon name="cross" size="18" @click="cancel"/></view>
    </view>
    <view class="nv-pick_box" v-if="$slots.default">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name:'NvPick',
    data(){
      return{
        itemValue:null,
        itemIndex:0,
        searchVal:''
      }
    },
    props:{
      title:{
        type:String,
        default:''
      },
      height:{
        type:[Number,String],
        default:''
      }
    },
    methods:{
      cancel() {
        this.$emit('cancel')
      },
    }
  }
</script>
<style lang="less" scoped>
  .nv-pick{
    .nv-pick_title{
      height: 44px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      padding: 0 14px;
      color: #333333;
      position: sticky;
      line-height: 44px;
      top: 0;
      z-index: 1;
      background: #ffffff;
      .v-icon{
        position: absolute;
        top: 10px;
        right: 20px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
      }
    }
    .nv-pick_box{
      .nv-pick_item{
        display: flex;
        align-items: center;
        padding: 12px 18px;
        .nv-pick_item_icon{
          img{
            width: 24px;
            height: 24px;
          }
        }
        .nv-pick_item_title{
          font-size: 14px;
          margin-left: 6px;
          flex: 1;
        }
        .nv-pick_item_num{
          font-size: 12px;
          color: #ADADAD;
        }
      }
      .nv-pick_check{
        background: #F8F8F8;
      }
    }
  }
</style>
